<!DOCTYPE html>
<html lang='zh-CN'>
<meta charset='utf-8'>
<meta content='IE=edge' http-equiv='X-UA-Compatible'>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link href="https://cdn.bootcss.com/mdui/0.4.0/css/mdui.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/mdui/0.4.0/js/mdui.min.js"></script>
<script src="https://cdn.bootcss.com/marked/0.3.18/marked.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script src="https://cdn.bootcss.com/KaTeX/0.9.0/katex.min.js"></script>
<link href="https://cdn.bootcss.com/KaTeX/0.9.0/katex.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/KaTeX/0.9.0/contrib/auto-render.min.js"></script>
<script src="https://cdn.bootcss.com/lodash.js/4.17.5/lodash.min.js"></script>
<link rel="stylesheet" href="./md.css">
<link rel="stylesheet" href="https://fonts.cat.net/earlyaccess/notosansscsliced.css">
<title>成语</title>
<header>
    <div class="mdui-appbar mdui-appbar-fixed">
        <div class="mdui-toolbar mdui-color-theme">
            <a href="javascript:;" class="mdui-btn mdui-btn-icon" mdui-drawer="{target: '#left-drawer'}">
                <i class="mdui-icon material-icons">menu</i>
            </a>
            <span class="mdui-typo-title">成语</span>
            <div class="mdui-toolbar-spacer"></div>
            <a href="javascript:;" class="mdui-btn mdui-btn-icon">
                <i class="mdui-icon material-icons">search</i>
            </a>
        </div>
    </div>
</header>

<body class="mdui-theme-primary-indigo mdui-theme-accent-pink mdui-appbar-with-toolbar">
    <div id="app" class="mdui-container">
        <div class="mdui-card mdui-m-t-4 mdui-m-t-2">
            <div class="mdui-card-media mdui-ripple mdui-img-rounded">
                <img src="wpp.jpg" />
                <div class="mdui-card-menu">
                    <button class="mdui-btn mdui-btn-icon mdui-text-color-white">
                        <i class="mdui-icon material-icons">share</i>
                    </button>
                </div>
            </div>
            <div class="mdui-card-primary">
                <div class="mdui-card-primary-title">南极动物保护协会</div>
            </div>
        </div>
        <div style="height: 32px"></div>
        <div v-for="gzp in ques">
            <div class="mdui-card mdui-hoverable mdui-shadow-5 mdui-ripple mdui-m-t-2 mdui-m-b-2" @click="gzp.show = !gzp.show">
                <div class="mdui-card-content mdui-typo">
                    <div v-html="compiledMarkdown(gzp.question)"></div>
                    <transition name="fade">
                        <div v-if="gzp.show">
                            <p>
                                <b>【答案】</b>{{gzp.answer}}</p>
                            <div v-html="compiledMarkdown(gzpstr+gzp.purpose)"></div>
                        </div>
                    </transition>
                </div>
            </div>
            <div class="mdui-divider"></div>
        </div>
        <div style="height: 1080px"></div>
        <div class="mdui-card mdui-hoverable mdui-shadow-5 mdui-ripple mdui-m-t-2 mdui-m-b-2">
            <div class="mdui-card-content mdui-typo">
                <p>你你你怎么还往下翻？</p>
            </div>
        </div>
        <div style="height: 1080px"></div>
        <div class="mdui-row">
            <div class="mdui-col-xs-6">
                <div class="mdui-card mdui-hoverable mdui-shadow-5 mdui-ripple">
                    <div class="mdui-card-media mdui-ripple mdui-img-rounded">
                        <img src="wxp.jpg" />
                    </div>
                </div>
            </div>
            <div class="mdui-col-xs-6">
                <div class="mdui-card mdui-hoverable mdui-shadow-5 mdui-ripple">
                    <div class="mdui-card-media mdui-ripple mdui-img-rounded">
                        <img src="xy.png" />
                    </div>
                </div>
            </div>
            <div class="mdui-col-xs-12">
                <div class="mdui-card mdui-hoverable mdui-shadow-5 mdui-ripple">
                    <div class="mdui-card-content mdui-typo">
                        <p>完 全 一 致</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            ques: [],
            gzpstr: "**【解析】**"
        },
        created() {
            fetch('./data.json')
                .then(response => response.json())
                .then(json => {
                    this.ques = json.datas
                })
        },
        methods: {
            renderMath: function () {
                _.delay(
                    function () {
                        renderMathInElement(document.body, {
                            delimiters: [{
                                    left: "$$",
                                    right: "$$",
                                    display: true
                                },
                                {
                                    left: "\\[",
                                    right: "\\]",
                                    display: true
                                },
                                {
                                    left: "\\(",
                                    right: "\\)",
                                    display: false
                                },
                                {
                                    left: "$",
                                    right: "$",
                                    display: false
                                }
                            ]
                        });
                    }, 500)
            },
            compiledMarkdown: function (input) {
                return marked(input)
            }
        },
        watch: {
            ques: function () {
                this.renderMath()
            }
        }
    })
</script>